<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>营销管理</el-breadcrumb-item>
            <el-breadcrumb-item>套餐管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">套餐</h3>
          <el-form :inline="true"  class="demo-form-inline" style="text-align: left" ref="searchbox">
            <el-form-item label="套餐名称">
              <el-input v-model="name" placeholder="请输入标签名称"></el-input>
            </el-form-item>


            <el-form-item label="状态">
              <el-select v-model="status" placeholder="请选择优惠券状态">
                <el-option label="全部" value="0"></el-option>
                <el-option label="未开始" value="1"></el-option>
                <el-option label="进行中" value="2"></el-option>
                <el-option label="已结束" value="3"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button  @click="resetBox">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      <el-card style="margin-top: 30px">

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">套餐列表
              <div style="float: right;margin-right: 30px;">
                <el-button type="primary" size="mini" @click="showAdd">新建</el-button>
              </div>
            </h3>
            <el-table :data="packageVoList" border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="套餐名称" prop="name"></el-table-column>
              <el-table-column label="上架时间" prop="startTime"></el-table-column>
              <el-table-column label="下架时间" prop="endTime"></el-table-column>
              <el-table-column label="套餐状态" prop="status">
                <template slot-scope="scope">
                  <b style="color:#0000ff" v-show="scope.row.status==1">{{caseStatusArr[1]}}</b>
                  <b style="color:#3cb371" v-show="scope.row.status==2">{{caseStatusArr[2]}}</b>
                  <b style="color:#ff0000" v-show="scope.row.status==3">{{caseStatusArr[3]}}</b>
                </template>
              </el-table-column>

              <el-table-column label="是否包邮" prop="freeShipping">
                <template slot-scope="scope">
                  <b v-show="scope.row.freeShipping==1">套餐包邮</b>
                  <b v-show="scope.row.freeShipping==0">按包邮规则计算</b>
                </template>
              </el-table-column>
              <el-table-column label="套餐内单品总价" prop="priceOld"></el-table-column>
              <el-table-column label="套餐价格" prop="priceNew"></el-table-column>
              <el-table-column label="套餐库存" prop="stock"></el-table-column>
              <el-table-column label="每个用户限购数量" prop="limitBuy"></el-table-column>
              <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
<!--                        <el-button type="info" size="mini" @click="showData(scope.row.id)">数据</el-button>-->
                        <el-button type="warning" size="mini" @click="showChange(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" v-show="scope.row.status==2" @click="stopIt(scope.row.id)">停用</el-button>
                        <el-button type="success" size="mini" v-show="scope.row.status==1" @click="startIt(scope.row.id)">开始</el-button>
                    </template>
                </el-table-column>-->
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>



    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                name:'',
                status:'',
                packageVoList:[],

                caseStatusArr:{
                  1:"未开始",
                  2:"进行中",
                  3:"已结束",
                },
                addDialogVisible: false,
                addForm: {


                },
                addFormRules: {


                },
                value1: [],
                value2: [],
                changeDialogVisible:false,
                changeForm:{

                },
            };
        },
        methods: {
          showData(){

          },
          showChange(row) {

            this.$router.push({
              path: "/ChangePackage/",
              query: {
                package: row,

              }
            })
          },


          showAdd(){
            this.$router.push("/AddPackage");
          },
          stopIt(id){

          },
          startIt(id){

          },

          handleCurrentChange(newPage) {
            this.pageNum = newPage;
            this.getPackage();
          },
          handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.getPackage();
          },
          search(){
            this.pageNum = 1;
            this.getPackage();
          },
          resetBox(){
            this.name = "";
            this.status = "";
            this.getPackage();
          },
          getPackage() {
            let url = "package/showAll";
            this.$axios.get(url, {
              params: {
                now: this.pageNum,
                size: this.pageSize,
                name: this.name,
                status: this.status,
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.packageVoList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            });
          },
          reloadData(){
            this.getPackage();
          },
        },

        created() {
          this.reloadData();
        }
    }
</script>
<style lang="less" scoped>
</style>